<template>
    <div class="top">
      <svg class="icon" aria-hidden="true" @click="$router.push('/')">
        <use xlink:href="#icon-fanhui1"></use>
      </svg>
      <div class="autor">
        <!-- <van-dropdown-menu>
        <van-dropdown-item v-model="value1" :options="option1" />
         </van-dropdown-menu> -->
         <div class="drown">
        <img :src="profile.avatarUrl" alt="" @click="imgdisplay">
        <div class="drownitem" v-if="show">
        <a href="">修改</a>
        <a href="" @click="goout">退出</a>
        </div>
        </div>
        <!-- <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" /> --> 
      </div>
      <span class="avatarname">{{profile.nickname}}</span>
    </div>
</template>
<script>
export default {
   data() {
      return {
        profile:'',
        value1:0,
        show:false,
        option1:[
        { text: '全部商品', value: 0 },
        { text: '新款商品', value: 1 }
        ]
      }
   },
   computed:{
   },
   methods:{
    goout()
    {
      sessionStorage.removeItem('token')
    },
    imgdisplay(){
      this.show=true
   }
   },
   created(){
         this.profile=JSON.parse(sessionStorage.getItem('profile'))
   },
}
</script>
<style lang="less" scoped>
.top{
  display: flex;
  flex-direction: row;
  align-content:center;

.autor{
 margin-left: 210px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  .drown{
     img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
  }
  .drownitem{
        display:none;
        border-top: none;
        display: flex;
        flex-direction: column;
       a{
        padding:5px 2px;
       }
    }
  }
  
}
.avatarname{ 
   display: flex;
   align-items: center;
   font-size: 9px;
   height: 20px;
   margin-top: 10px;
   margin-left: 10px;
 }
}
</style>
